<template>
    <div class="scroll-container">
        <ul :class="[isTransition?'scroll-row':'scroll-row1']" ref="$scrollText">
            <li v-for="item in datalist" :key="item.id">
            <slot :row="item"></slot>
            </li>
        </ul>
    </div>
</template>
<script>
let timer = null;
export default {
    props : ['datalist','len','interval','type','mHeight'],
    data(){

        return {
            isTransition : true,
            activeIndex : 0,
            datalen : 0,
            lineHeight : 0,
            containerHeight : 0,
            container : null,
   
        }
    },
    methods : {
        init(){
  
            this.container = this.$refs.$scrollText;
            let _lineHeight = 0;
          
            if(this.mHeight){
                _lineHeight = this.mHeight;
            }else{
                if(!this.container.children || this.container.children.length==0) return;
                _lineHeight = window.getComputedStyle(this.container.children[0]).height;//this.container.childNodes[0].offsetHeight || 30; //
            
            }
     
            //fix cantainerHeight is NVA bug
            this.lineHeight =  parseInt(_lineHeight);
            this.containerHeight = Math.floor(this.lineHeight * this.len);

            this.container.parentNode.style.height = this.containerHeight + 'px';
            this.datalen = this.datalist.length;
    
            //min value is 1000
            this.interval = this.interval < 1000 ? 1000 : this.interval;
       
        },
        scroll(len = 3){

            this.init();
            let items = this.datalist;

            if(!items || items.length <= len) {
                timer = setTimeout(()=>{

                    this.scroll(len);
                },this.interval || 1000);
                return;
            };

            if(!this.container) return;

            this.container.style.top = -(this.activeIndex * this.lineHeight) + 'px';

            timer = setTimeout(() => {
                if(this.activeIndex < items.length - len) {
                    this.activeIndex +=1;
                } else {
                    this.activeIndex = 0;
                }
                this.scroll(len);

            }, this.interval || 1000);
        },
        scrollRoll(len = 3){
            this.init();
            let items = this.datalist;

            if(!items || items.length <= len){
                timer = setTimeout(()=>{

                    this.scrollRoll(len);
                },this.interval || 1000);
                return;
            }

            if(!this.container) return;
  
            this.container.style.top = -(this.activeIndex * this.lineHeight) + 'px';
         
            //fixed 中间有停顿的时间间隔的问题
            if(this.activeIndex > 0){//删除顶部元素，并取消效果
                setTimeout(()=>{
                    this.isTransition = false;
                    items.shift();
                    this.container.style.top = 0;
                    this.activeIndex = 0;    
                }, 600);

            }
           
            timer = setTimeout(() => {
                this.isTransition = true;
                items.push(items[this.activeIndex]);
                this.activeIndex += 1;
                this.scrollRoll(len);
            }, this.interval || 1000);
        }
    },
    destroyed(){
        if(timer){
            clearTimeout(timer);
        }
    },
    mounted(){
        if(this.type=='roll'){

            this.scrollRoll(this.len);
        }else{
            this.scroll(this.len);
        }
       
    }
}
</script>


<style scoped>
.scroll-container{
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.scroll-row{
  position: relative;
  padding: 0;
  margin: 0;
  transition: top 0.5s;
  -webkit-transition: top 0.5s;
}
.scroll-row1{
  position: relative;
  padding: 0;
  margin: 0;
}
</style>